<template>
    <div class="shopCar-container">
        <!-- 商品列表区 -->
        <div class="goods-list">
            <div class="mui-card" v-for="(item, i) in shopcarinfo">
                <div class="mui-card-content">
                    <div class="mui-card-content-inner">
                        <mt-switch 
                            v-model="$store.getters.getGoodsSelected[item.id]"
                            @change="changeSelected(item.id, $store.getters.getGoodsSelected[item.id])"></mt-switch>
                        <img 
                            :src="item.img_url" alt="">
                        <div class="info">
                            <h2>{{item.title}}</h2>
                            <p>
                                <span class="price">￥{{item.sell_price}}</span>
                                <numbox :defaultcount="$store.getters.getGoodsCount[item.id]" :goodsid="item.id"></numbox>
                                <a href="#" class="del" @click.prevent="remove(item.id, i)">删除</a>
                            </p>
                        </div>                            
                    </div>
                </div>
            </div>
        </div>

        <!-- 结算区 -->
        <div class="mui-card">
            <div class="mui-card-content">
                <div class="mui-card-content-inner countPrice">
                    <div class="left">
                        <p>
                            总计（不含运费）
                        </p>
                        <p>
                            已勾选商品 <span class="red">{{$store.getters.getCoodsCountAndPrice.count}}</span> 件，总价：<span class="red">￥{{$store.getters.getCoodsCountAndPrice.price}}</span>
                        </p>
                    </div>

                    <mt-button type="danger" size="small">去结算</mt-button>                    
                    
                </div>
            </div>
        </div>
        
    </div>

</template>

<script type="text/javascript">
    
    import numbox from '../subcomponents/shopcar_numberbox.vue'
    
     export default{
         data() {
             return {
                 shopcarinfo: []
             }
         },
         components: {
            numbox
         },
         created() {
             this.getGoodsList()
         },
         methods: {
             getGoodsList() {
                 var idArr = [];
                 this.$store.state.car.forEach( item => this.getApiInfo( item.id ));

                //  this.getApiInfo('0');
             },
             getApiInfo( id ) {
                 this.$http.get('getShopCarInfo/'+ id + '.php').then( res => {
                     if( res.body.status === 0){
                        this.shopcarinfo.push( res.body.Message )
                     } else {
                         console.log('Warring')
                     }
  
                 } )
             },
             remove(id, index){
                 this.shopcarinfo.splice(index, 1);
                 this.$store.commit('removeFromCar', id);
             },
             changeSelected(id, val) {
                this.$store.commit('updateSelected', {id, val})
             }
         }
    }
</script>
<style lang="scss" scoped>
    .shopCar-container {
        background-color: #eee;
        overflow: hidden;
        
        .goods-list {
            img {
                width: 60px;
                height: 60px;
            }
            h2 {
                font-size: 13px;
            }
            .info {
                display: flex;
                flex-direction: column;
                justify-content: space-between;

                .price {
                    color: red;
                    font-weight: bold;
                }
                .del {
                    color: #226aff;
                }
            }
           
            .mui-card-content-inner {
                display: flex;
                align-items: center;
            }
        }
        .countPrice {
            display: flex;
            justify-content: space-between;
            align-items: center;
            .red {
                color: red;
                font-weight:bold;
                font-size: 16px;
            }
        }

    }
</style>